<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home</title>

    <script src="../public/vue/dist/vue.min.js"></script>
    <!-- Bootstrap CSS -->
    <link href="../public/bootstrap/dist/css/bootstrap.css" rel="stylesheet">
    <!-- jQuery -->
    <script src="../public/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap JavaScript -->
    <script src="../public/bootstrap/dist/js/bootstrap.min.js"></script>


    <link rel="stylesheet" href="../public/summernote/dist/summernote.css">

    <script src="../public/summernote/dist/summernote.js"></script>
    <script src="../public/summernote/dist/lang/summernote-zh-CN.js"></script>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

    <div class="container" id="sysSettingApp" style="margin: 50px auto;">

        <div class="panel panel-info">

            <div class="panel-body">
                <form class="navbar-form navbar-right">

                    <div class="form-group">
                        <label for="firstname" class="control-label">skey</label>
                        <div class="input-group">
                            <input type="text" v-model="sysSettingSearchForm.skey" class="form-control">
                        </div>
                    </div>
                    <button type="button" @click="queryItem" class="btn btn-primary">搜索</button>
                </form>
            </div>
        </div>


        <button type="button" @click="fnClear" class="btn btn-success">add</button>

        <div class=" pull-right">

            <ul class="pagination">

                <button type="button" @click="fnLastPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-left" ></i></button>

                <input type="number" style="width: 50px;" v-model="page" @change="queryItem" min="1" :max="pages">
                / {{pages}}

                <!-- <li v-for="n in pages">
                    <button type="button" @click="fnPageChange(n)" class="btn btn-link">{{n}}</button>
                </li> -->
                <button type="button" @click="fnNextPage" class="btn btn-link"><i class="glyphicon glyphicon-chevron-right" ></i></button>
            </ul>

        </div>

        <table class="table table-condensed table-bordered">
            <thead>
                <tr>
                    <th>stype</th>
                    <th>skey</th>
                    <th>svalue</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in sysSettingList" :key="index">
                    <td>
                        {{ item.stype }}
                    </td>
                    <td>

                        <button type="button" @click="fnUpdate(item)" class="btn btn-link">{{item.skey}}</button>

                    </td>
                    <td>{{item.svalue}}</td>

                    <td>{{item.ctime}}</td>
                    <td>

                        <!-- <button type="button" @click="fnUpdate(item)" class="btn btn-primary">modify</button> -->
                        <button type="button" @click="fnDeleteModal(item)" class="btn btn-danger">delete</button>

                    </td>
                </tr>
            </tbody>
        </table>


        <!-- add form  -->

        <div class="alert alert-success">
            <form role="form">
                <div class="form-group" v-show="false">
                    <label>_id</label>
                    <input type="text" name="" id="input" class="form-control" v-model="sysSettingForm._id">
                </div>
                <div class="form-group">
                    <label>stype</label>
                    <input type="text" name="" id="input" class="form-control" v-model="sysSettingForm.stype">
                </div>
                <div class="form-group">
                    <label>skey</label>
                    <input type="text" name="" id="input" class="form-control" v-model="sysSettingForm.skey">
                </div>

                <div class="form-group">
                    <label>svalue</label>

                    <textarea v-model="sysSettingForm.svalue" class="form-control" rows="20" required="required"></textarea>

                </div>


                <div class="form-group">
                    <div>
                        <button type="button" @click="fnAdd" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </form>

        </div>


        <!-- 模态框（Modal） -->
        <div class="modal fade  bs-example-modal-sm" id="deleteConfirmModal" tabindex="-1" role="dialog"
            aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-sm">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        <h4 class="modal-title" id="myModalLabel">提示</h4>
                    </div>
                    <div class="modal-body"> 确定执行操作吗？</div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" @click="fnDelete" class="btn btn-primary">确定</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <!-- /.modal -->



    </div>






</body>

</html>

<script>
    var vm = new Vue({

        el: '#sysSettingApp',
        data: {
            total: 0,
            page: 1,
            sysSettingSearchForm: {
                skey: '',
                svalue: '',
            },

            deleteId: '',
            sysSettingForm: {},
            sysSettingList: []
        },
        computed: {

            pages() {
                return Math.ceil(this.total / 10);
            }
        },
        methods: {



            //validator 字段
            sysSettingRule() {

                return [
                    {
                        name: this.sysSettingForm.skey,
                        validators: {
                            notEmpty: {
                                tip: "skey不能为空"
                            },

                            regexp: {
                                reg: /^[a-zA-Z0-9_]+$/,
                                tip: 'skey只能包含大写、小写、数字和下划线'
                            }
                        }
                    },
                    {
                        name: this.sysSettingForm.svalue,
                        validators: {
                            notEmpty: {
                                tip: "svalue不能为空"
                            },

                        }
                    },

                ];

            },

            //必填字段 验证工具
            validatorRule(ruleArr) {

                for (var i = 0; i < ruleArr.length; i++) {
                    var item = ruleArr[i];
                    var validators = item.validators;
                    for (var key in validators) {

                        if ("notEmpty" == key) {
                            if (!item.name) {
                                alert(validators[key].tip);
                                return false;
                            }
                        }

                        if ("regexp" == key) {
                            if (!validators[key].reg.test(item.name)) {
                                alert(validators[key].tip);
                                return false;
                            }
                        }

                    }
                }

                return true;
            },



            fnLastPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page > 1) {

                    var n = this.page - 1;
                    this.fnPageChange(n);
                }
            },

            fnNextPage() {

                if (this.page > this.pages) {

                    var n = this.pages;
                    this.fnPageChange(n);
                }
                if (this.page < this.pages) {

                    var n = this.page + 1;
                    this.fnPageChange(n);
                }
            },
            // 下一页
            fnPageChange(n) {

                this.page = n;
                this.query();

            },

            fnClear() {

                this.sysSettingForm = {}
            },

            // [修改] 按钮
            fnUpdate(item) {

                this.sysSettingForm = item;
            },

            // 删除弹框
            fnDeleteModal(item) {

                this.deleteId = item._id;
                $('#deleteConfirmModal').modal('show');
            },


            // 删除数据
            fnDelete() {

                $('#deleteConfirmModal').modal('hide');
                var _self = this;

                var deleteUrl = '../sysconfigs/delete';
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: deleteUrl,
                    data: {
                        _id: _self.deleteId
                    },
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 0) {
                            _self.query();
                        }

                    }
                });

            },


            // 新增 保存
            fnAdd() {

                if (!this.validatorRule(this.sysSettingRule())) {
                    return;
                }

                var _self = this;

                var postUrl = '../sysSettings/add';
                if (this.sysSettingForm._id) {
                    postUrl = '../sysSettings/update'
                }
                $.ajax({
                    // crossDomain: true,
                    type: "post",
                    url: postUrl,
                    data: _self.sysSettingForm,
                    dataType: "json",
                    success: function (response) {

                        if (response.code == 0) {

                            _self.sysConfig = response.dat;
                            _self.all();
                        }

                    }
                });
            },


            // 查询
            queryItem() {

                var _self = this;
                $.ajax({
                    // crossDomain: true,
                    type: "get",
                    url: "../sysSettings/",
                    data: _self.sysSettingSearchForm,
                    dataType: "json",
                    success: function (response) {
                        if (response.code == 0) {
                            _self.sysSettingList = response.dat.records;
                            _self.total = response.dat.total;
                        }

                    }
                });
            }
        },
        mounted() {

            this.queryItem();
        }
    })
</script>